<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>侧边导航栏</title>
	<style>
		   *{margin:0;padding:0;list-style-type:none;}
		   .list_nav{
		   	position:fixed;
		   	left:20px;
		   	margin-top:0px;
		   }
		   .list_nav>li{
		   	width:100px;
		   	height:100px;
		   	background-color:#ccc;
		   	text-align:center;
		   	line-height:100px;
		   	position:relative;
		   	border-radius:50px;
		   }
		   .list_nav>li>ul{
		   	width:400px;
		   	position:absolute;
		   	top:0;
		   	left:100px;
		   	display:none;
		   }
		   .list_nav>li:hover ul{
		   	display:block;
		   }
		   .list_nav>li>ul>li{
		   	width:100px;
		   	height:100px;
		   	float:left;
		   	border-radius:50px;
		   }
		   .list_nav>li>ul>li:hover{
		   	background-color:pink;
		   }
		   	.list_nav1{
		   	position:fixed;
		   	right:20px;
		    bottom:0px;
		   }
		   .list_nav1>li{
		   	width:100px;
		   	height:100px;
		   	background-color:#ccc;
		   	text-align:center;
		   	line-height:100px;
		   	position:relative;
		   	border-radius:50px;
		   }
		   .list_nav1 li>ul{
		   	width:400px;
		   	position:absolute;
		   	top:0;
		   	right:100px;
		   	display:none;
		   }
		   .list_nav1>li:hover ul{
		   	display:block;
		   }
		   .list_nav1>li>ul>li{
		   	width:100px;
		   	height:100px;
		   	float:right;
		   	border-radius:50px;
		   }
		   .list_nav1>li>ul>li:hover{
		   	background-color:pink;
		   }
	</style>
</head>
<body>
	  <nav class="list_nav">
	  	    <li>导航1
	  	    	<ul>
	  	    		<li>第1个</li>
	  	    		<li>第2个</li>
	  	    		<li>第3个</li>
	  	    		<li>第4个</li>
	  	    	</ul>
	  	    </li>
	  	    <li>导航2
	  	        <ul>
	  	    		<li>第1个</li>
	  	    		<li>第2个</li>
	  	    		<li>第3个</li>
	  	    		<li>第4个</li>
	  	    	</ul>
	  	    </li>
	  	    <li>导航3
	  	    	<ul>
	  	    		<li>第1个</li>
	  	    		<li>第2个</li>
	  	    		<li>第3个</li>
	  	    		<li>第4个</li>
	  	    	</ul>
	  	    </li>
	  	    <li>导航4	  	    	
	  	    	<ul>
	  	    		<li>第1个</li>
	  	    		<li>第2个</li>
	  	    		<li>第3个</li>
	  	    		<li>第4个</li>
	  	    	</ul>
	  	    </li>
	  </nav>
	  <nav class="list_nav1">
	  	    <li>导航1
	  	    	<ul>
	  	    		<li>第1个</li>
	  	    		<li>第2个</li>
	  	    		<li>第3个</li>
	  	    		<li>第4个</li>
	  	    	</ul>
	  	    </li>
	  	    <li>导航2
	  	        <ul>
	  	    		<li>第1个</li>
	  	    		<li>第2个</li>
	  	    		<li>第3个</li>
	  	    		<li>第4个</li>
	  	    	</ul>
	  	    </li>
	  	    <li>导航3
	  	    	<ul>
	  	    		<li>第1个</li>
	  	    		<li>第2个</li>
	  	    		<li>第3个</li>
	  	    		<li>第4个</li>
	  	    	</ul>
	  	    </li>
	  	    <li>导航4	  	    	
	  	    	<ul>
	  	    		<li>第1个</li>
	  	    		<li>第2个</li>
	  	    		<li>第3个</li>
	  	    		<li>第4个</li>
	  	    	</ul>
	  	    </li>
	  </nav>
</body>
</html>